<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="queryinfo.query" clearable @clear="getorderslist">
                        <el-button slot="append" icon="el-icon-search" @click="getorderslist"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <el-table border :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}" stripe :data="orderslist">
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <el-table-column label="订单编号" prop="order_number"></el-table-column>
                <el-table-column label="订单价格" prop="order_price"></el-table-column>
                <el-table-column label="是否付款" >
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.order_pay==0">未付款</el-tag>
                        <el-tag v-else>已付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否发货" prop="is_send"></el-table-column>
                <el-table-column label="下单时间">
                    <template slot-scope="scope">
                        {{scope.row.create_time|dateformat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop=""></el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination layout="prev, pager, next,sizes,total" :total="total" :page-sizes="[5, 10, 15]"></el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    created() {
        this.getorderslist();
    },
    data() {
        return {
            queryinfo:{
                query:"",
                pagenum:"1",
                pagesize:"6"
            },
            orderslist:[],
            total:0,
        }
    },
    methods: {
        async getorderslist(){
            const {data:res} = await this.$http.get("orders",{params:this.queryinfo});
            console.log(res.data);
            this.orderslist=res.data.goods;
            this.total=res.data.total;
        }
    },
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.el-breadcrumb {
  margin-left: 170px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.box-card {
  width: 1200px;
  margin: 0 auto;
}
</style>